<template>
  <div v-if="SongDetail">
      <!-- 全屏播放器 -->
      <div class="player" v-show="showPlayer">
          <div class="bg" :style="'background-image: url('+SongDetail.al.picUrl+')'"></div>
          <div class="shade"></div>
          <div class="view">
                <div class="button" @click.stop="showPlayer=false">
                    <span class="iconfont icon-xiajiantou"></span>
                </div>
                <div class="title">
                    <h2>{{SongDetail.name}}</h2>
                    <h3>
                        <span v-for="(item,index) in SongDetail.ar" :key="index">{{item.name}}&nbsp;</span>
                    </h3>
                </div>
                <div class="content">
                    <div v-show="togglelyric" @click="togglelyric = false" :class="['img','play',{'pause':iconplay}]">
                        <img :src="SongDetail.al.picUrl" alt="">
                    </div>
                    <div class="lyrics" v-show="!togglelyric" @click="togglelyric = true">
                        <ul :style="{'top':lyricTop}">
                            <li v-for="(item,index) in lyric" :key="index" :class="{'con':currentRow==index}">{{item.text}}</li>
                        </ul>
                    </div>
                </div>
                <div class="buttonsA">
                    <!-- <div class="iconfont icon-xihuan" v-show="likeCheck" @click="likebtn"></div>
                    <div class="iconfont icon-xihuan1" v-show="!likeCheck" @click="likebtn"></div> -->
                    <div class="iconfont icon-pinglun" @click="remarkLists"></div>
                    <!-- <div class="iconfont icon-lishiliebiao" @click="getReData" ></div> -->
                </div>
                <div class="range">
                    <div class="bar">
                        <span class="timeLeft">{{timeLeft | playerTime}}</span>
                        <van-slider @change="sliderchange" v-model="value" inactive-color="#514E4C" bar-height="4px" active-color="#ee0a24">
                            <template #button>
                                <div class="custom-button"></div>
                            </template>
                        </van-slider>
                        <span class="timeRight">{{timeRight | playerTime}}</span>
                    </div>
                </div>
                <div class="buttons">
                    <div v-if="playerType == 1" @click="changeType" class="iconfont icon-liebiaoxunhuan"></div>
                    <div v-else-if="playerType == 2"   @click="changeType" class="iconfont icon-suijixunhuan"></div>
                    <div v-else-if="playerType == 3"   @click="changeType" class="iconfont icon-20gl-repeatOnce2"></div>
                    <div class="iconfont icon-shangyiqu1" @click="startup"></div>
                    <div :class="['iconfont',iconplay?'icon-bofang1':'icon-zanting']" @click.stop="toggleplay"></div>
                    <div class="iconfont icon-xiayiqu" @click='lowerFun'></div>
                    <div class="iconfont icon-xihuan" v-show="likeCheck== false" @click="likebtn"></div>
                    <div class="iconfont icon-xihuan1" v-show="likeCheck== true" @click="likebtn"></div>
                </div>
          </div>
          
      </div>




      <!-- 迷你播放器 -->
      <div class="mini-player" v-if="SongDetail"  @click="showPlayer = true">
          <div :class="['img','play',{'pause':iconplay}]" >
              <img :src="SongDetail.al.picUrl" alt="">
          </div>
          <div class="text">
              <h2>{{SongDetail.name}}</h2>
              <h3>
                  <span v-for="(item,index) in SongDetail.ar" :key="index">{{item.name}}&nbsp;</span>
              </h3>
          </div>
          <div class="control" @click.stop="toggleplay">
              <span class="iconfont icon-bofang1" v-show="iconplay"></span>
              <span class="iconfont icon-zanting" v-show="!iconplay"></span>
          </div>
      </div>
      <!-- oncanplay	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本 -->
      <!-- loadeddata 	当加载媒介数据时运行脚本 -->
      <!-- 音频播放器 -->
      <audio
      ref="audio"
      hidden controls
      :src="musicData"
      @loadeddata="loadeddataFun"
      @ended="endedFun"
      ></audio>
  </div>
</template>

<script>
import {getSongUrl,getSongDetail,getLyric,getLike} from "../../api/base";
import {getPlaylistDetail,getRecordRecentSong,getUserRecord} from "../../api/rank";//getUserRecord,

import { Toast } from 'vant';

export default {
    props:["playerId","listId"],
    data(){
        return {
            musicData:"",
            iconplay:true,//播放按钮
            SongDetail:null,//歌曲信息
            value:0,  //滚动条 0-100
            showPlayer:false, //全屏播放器状态
            timeRight:0,//右侧时间
            timeLeft:0,//左侧时间
            clearset:null,//定时器
            playerLists:[],//播放列表
            togglelyric:false,//歌词切换
            lyric:[],//歌词数组
            lyricTop:'144px',//歌词位置
            currentRow:0,//歌词高亮
            playerType:1,// 播放类型 1.列表播放 2.随机播放
            likeCheck:false,// 喜欢按钮
        }
    },
    methods:{
        // 获取用户播放历史记录接口
        getUserRecordFun(){
            getUserRecord({uid:window.localStorage.uid,type:0}).then(data=>{
                console.log(data)
            })
        },
        // 获取添加我喜欢音乐接口
        getLikeFun(id){
            getLike({id:id}).then(data=>{
                console.log(data)
            })
        },
        // 获取播放记录接口
        getRecordRecentSongFun(){
            getRecordRecentSong().then(data=>{
                console.log('dawda',data)
            })
        },
        // 获取记录
        getReData(){
            // this.getRecordRecentSongFun();
            this.getUserRecordFun()
        },
        // // 获取播放历史记录接口
        // getUserRecordFun(){
        //     getUserRecord({uid:window.localStorage.uid,type:0}).then(data=>{
        //         console.log(data)
        //     })
        // },
        // 跳转到评论页面
        remarkLists(){
            this.showPlayer=false;
            this.$router.push({name:'remarkLists',params:{id:this.playerId}});
        },
        // 喜欢按钮
        likebtn(){
            this.likeCheck = !this.likeCheck;
            if(this.likeCheck==true){
                Toast("添加喜欢");
            }else{
                Toast("取消喜欢");
            }
            let id = this.SongDetail.id
            this.getLikeFun(id);
            console.log(this.likeCheck)
        },
        // 获取歌曲url
        getSongUrlFun(){
            getSongUrl({id:this.playerId}).then(data=>{
                this.musicData = data.data[0].url;
                this.iconplay = true;
            })
        },
        // 获取歌曲信息
        getSongDetailFun(){
            getSongDetail({ids:this.playerId}).then(data=>{
                console.log('获取歌曲信息',data);
                this.SongDetail = data.songs[0];
                console.log(this.SongDetail)
            })
        },
        // 获取歌曲歌词
        getLyricFun(){
            getLyric({id:this.playerId}).then(data=>{
                console.log(data);
                this.formatLyric(data.lrc.lyric)
            })
        },
        // 处理歌词结构
        formatLyric(text){
            this.lyric =[];
            let arr = text.split("\n");//把原歌词切割成字符串
            let row = arr.length;//获取数组长度
            for(let i = 0;i< row;i++){
                let temp_row = arr[i];//[00:00.000] 作词 : MK王逸杰
                let temp_arr = temp_row.split("]");//[00:00.000 , 作词 : MK王逸杰
                let lyrictext = temp_arr.pop();//删除数组最后一个,返回值
                temp_arr.forEach(el=>{
                    console.log(el);
                    let obj = {};
                    // [00:00.000 => [00,00.000]
                    let time_arr = el.substr(1,el.length - 1).split(":");
                    let s = time_arr[0]*60 + Math.ceil(time_arr[1]);//把分钟变成秒
                    obj.text= lyrictext;
                    obj.time = s;
                    if(lyrictext.length >0){
                        this.lyric.push(obj);//每一行歌词处理后放入数组中
                    }

                })
            }
            console.log(this.lyric);
        },
        // 播放暂停音乐
        toggleplay(){
            if(this.iconplay){
                this.$refs.audio.play();//播放音乐

                clearInterval(this.clearset); //清除定时器
                this.clearset = setInterval(()=>{
                    let currentTime = this.$refs.audio.currentTime; //实时变化时间
                    let duration = this.$refs.audio.duration; //总时间
                    this.timeLeft = currentTime;
                    // 计算滚动条值
                    this.value = (currentTime / duration) *100;
                    if(this.value == 100){
                        clearInterval(this.clearset);
                        this.$refs.audio.pause();//暂停音乐
                        this.iconplay = true;
                    }
                },999)


            }else{
                this.$refs.audio.pause();//暂停音乐
                clearInterval(this.clearset);
            }
            
            this.iconplay = !this.iconplay;//切换页面
        },
        // 音乐加载完成后,获取音乐数据
        loadeddataFun(){
            this.toggleplay();// 自动播放
            let duration = this.$refs.audio.duration;
            this.timeRight = duration;
        },
        // 音乐播放结束后
        endedFun(){
            console.log("音乐播放结束")
            this.iconplay = true;
            // 根据播放音乐类型,选择下一首歌
            if(this.playerType == 1){
                // 列表播放
                this.lowerFun();// 下一首歌
            }else if(this.playerType == 2){
                // 随机播放
                let index = parseInt(Math.random() * this.playerLists.length);
                this.$emit("set-player-id",this.playerLists[index].id);
            }else if(this.playerType == 3){
                this.unicyclic();// 单曲循环
            }
        },
        // 获取滚动条变化
        sliderchange(){
            var duration = (this.$refs.audio.duration * this.value)/ 100;
            this.timeLeft = duration;//修改页面数据
            this.$refs.audio.currentTime = duration; //修改播放时间
        },
        // 下一首歌
        lowerFun(){
            let id = this.SongDetail.id;// 获取id
            // 获取在播放歌曲列表中下标
            let index = this.playerLists.findIndex(item=>item.id == id);
            // 1.获取当前歌曲下标,下标加一,下一首歌.如果最后一首歌,重置为零回到第一首歌
            index = index + 1 > this.playerLists.length-1? 0 :index+1;
            // 返回父组件歌曲id
            this.$emit("set-player-id",this.playerLists[index].id);//修改父组件id值
        },
        // 上一首歌
        startup(){

            let id = this.SongDetail.id;// 获取id
            // 获取在播放歌曲列表中下标
            let index = this.playerLists.findIndex(item=>item.id == id);
            // 1.获取当前歌曲下标,下标减一,上一首歌.如果第一首歌,设置为最后一首歌
            index = index - 1 < 0? this.playerLists.length - 1 :index-1;
            // 返回父组件歌曲id
            this.$emit("set-player-id",this.playerLists[index].id);//修改父组件id值
        },
        // 单曲循环
        unicyclic(){
            let id = this.SongDetail.id;// 获取id
            let index = this.playerLists.findIndex(item=>item.id == id);
            this.$emit("set-player-id",this.playerLists[index].id);
            this.loadeddataFun();
        },
        // 播放类型切换
        changeType(){
            this.playerType = this.playerType >= 3? 1 : this.playerType+1;
            console.log(this.playerType)
            if(this.playerType == 1){
                Toast("列表播放");
            }else if(this.playerType == 2){
                Toast("随机播放");
            }else if(this.playerType == 3){
                Toast("单曲循环")
            }
        }
    },
    // 侦听器,只要数据修改,重新执行
    watch:{
        // 侦听播放id
        playerId(){
            this.getSongUrlFun();  //歌曲url
            this.getSongDetailFun(); //歌曲信息
            this.getLyricFun();//歌曲歌词
        },
        // 侦听播放列表id
        listId(){
            console.log("歌单数据");
            getPlaylistDetail({id:this.listId}).then(data=>{
                this.playerLists = data.playlist.tracks; //获取歌单数据
                console.log(this.playerLists);
            })
        },
        // 左测歌时间变化
        timeLeft(){
            for(let i = 0;i < this.lyric.length;i++){
                if(parseInt(this.timeLeft) <= this.lyric[i].time){
                    this.lyricTop = 144 - i * 36 + "px";
                    this.currentRow = i;//歌词高亮
                    break;
                }
            }
        }
    },
    filters:{
        playerTime(data){
            let m = parseInt(data / 60);//分钟
            let s = parseInt(data % 60);//秒
            if(m == 0 && s == 0 ){
                return "0:00";
            }else{
                return m+":" + (s < 10? "0"+s:s); // 01
            }
        }
    },
    created(){
    }
}
</script>

<style lang="less">

.player{
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,1);
    color:#fff;
    z-index: 15;
    .bg{
        position: absolute;
        top:0px;
        left:0px;
        width: 100%;
        height: 100%;
        // background-image: url("https://p2.music.126.net/e5cvcdgeosDKTDrkTfZXnQ==/109951166155165682.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(1.8);
        transform-origin: center center;
        filter: blur(30px);
        opacity: 1;
        z-index: 2;
    }
    .shade{
        position: absolute;
        z-index: 3;
        left:0px;
        bottom:0px;
        height: 50%;
        width: 100%;
        background-image: linear-gradient(180deg,rgba(0,0,0,0),#000);
    }
    .view{
        position: absolute;
        z-index: 4;
        left:0px;
        bottom:0px;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,0.2);
        .button{
            font-size: 22px;
            position: absolute;
            left:13px;
            top:13px;
            font-weight: bold;
        }
        .title{
            display: block;
            text-align: center;
            color: white;
            h2{
                font-size: 20px;
            }
            h3{
                font-size: 14px;
            }
        }
        .content{
            text-align: center;
            height: 65%;
            width: 100%;
            position: relative;
            .img{
                position: absolute;
                top:0px;
                left:0px;
                right: 0px;
                bottom: 0px;
                margin: auto;
                width: 300px;
                height: 300px;
                border-radius: 50%;
                background: rgba(0,0,0,0.3);
                img{
                    margin:0 auto;
                    width: 274px;
                    height: 274px;
                    border-radius: 50%;
                    padding-top: 13px;
                }
                
                &.play{
                    animation: rotate 20s linear infinite;
                }
                &.pause{
                    animation-play-state: paused;
                }
            }
            .lyrics{
                width: 100%;
                height: 60%;
                margin-top:24%;
                position: relative;
                overflow: hidden;
                ul{
                    position: absolute;
                    width: 100%;
                    top:180px;
                    left:0px;
                    // transition: all 0.3s linear;
                    li{
                        height: 36px;
                        line-height: 36px;
                        color:#cbcccc;
                        font-size: 16px;
                        overflow: hidden;
                        &.con{
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
    .range{
        position: absolute;
        width: 100%;
        left:0px;
        bottom:110px;
        text-align: center;
        .bar{
            width: 66%;
            margin: auto;
            position: relative;
            font-size: 14px;
            .timeLeft{
                position: absolute;
                left:-34px;
                top:-6px;
            }
            .timeRight{
                position: absolute;
                right:-34px;
                top:-6px;
            }
        }
    }
    .buttons{
        display: flex;
        position: absolute;
        bottom: 40px;
        width: 100%;
        .iconfont{
            flex:1;
            width: 20%;
            text-align: center;
            font-size: 24px;
            line-height: 38px;
            color:#fff;
        }
        .iconfont.icon-zanting{
            font-size: 30px;
        }
        .iconfont.icon-xihuan1{
            font-size: 30px;
            color: red;
        }
    }
    .buttonsA{
        display: flex;
        position: absolute;
        bottom: 140px;
        width: 100%;
        .iconfont{
            flex:1;
            width: 20%;
            text-align: center;
            font-size: 24px;
            line-height: 38px;
            color:#fff;
        }
        .iconfont.icon-zanting{
            font-size: 30px;
        }
        .iconfont.icon-xihuan1{
            font-size: 30px;
            color: red;
        }
    }
}

.custom-button{
    width: 6px;
    height:6px;
    background-color: #D0261A;
    border:5px solid #fff;
    border-radius: 50%;
}

.mini-player{
    position: fixed;
    left:0px;
    bottom: 0px;
    width: 100%;
    height: 52px;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    z-index: 10;
    .img{
        height: 37px;
        width: 37px;
        margin:7px 9px 0px 17px;
        background-color: aqua;
        border-radius: 50%;
        img{
            height: 37px;
            width: 37px;
            border-radius: 50%;
        }
        &.play{
            animation: rotate 20s linear infinite;
        }
        &.pause{
            animation-play-state: paused;
        }
    }
    .text{
        flex: 1;
        h2{
            font-size: 16px;
            line-height: 16px;
            color:#131314;
            margin-top: 12px;
        }
        h3{
            line-height: 12px;
            font-size: 12px;
            color:#929393;
        }
    }
    .control{
        text-align: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        line-height: 24px;
        border:2px solid #464848;
        margin:11px 14px  0 0;
        .iconfont{
            color:#464848;
            font-size: 12px;
        }
        .iconfont.icon-bofang1{
            margin-left: 2px;
        }
        .iconfont.icon-zanting{
            font-weight: 700;
            font-size: 16px;
            line-height: 27px;
        }
    }
}

@keyframes rotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
</style>